<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调和酰胺键密度(HABD)计算器</title>
    <style>
        body {
            display: flex;
            justify-content: flex-start; /* 将内容从顶部开始对齐 */
            align-items: flex-start; /* 将内容从顶部开始对齐 */
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .calculator-box {
            width: 400px;
            margin: 0 auto; /* 通过上边距留出固定头部的空间 */
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: left;
        }
        .calculator-box input[type="text"] {
            width: calc(50% - 20px);
            margin-bottom: 10px;
            padding: 5px;
            font-size: 16px;
            display: inline-flex;
        }
        .calculator-box input[type="text2"] {
            width: calc(100% - 12px);
            margin-bottom: 10px;
            padding: 5px;
            font-size: 16px;
            display: inline-flex;
        }
        .calculator-box label {
            display: block;
        }
        .calculator-box input[type="radio"] {
            margin-right: 5px;
        }
        .calculator-box button {
            width: 100%;
            padding: 10px;
            font-size: 18px;
            cursor: pointer;
        }
        .parameter-option {
            display: inline-flex; /* 设置为 inline-flex，使单选框和标签在同一行显示 */
            align-items: center; /* 垂直居中 */
            margin-bottom: 5px; /* 调整垂直间距 */
        }
        .center-text {
            text-align: center;
        }
         /* 添加结果区域的样式 */
        .result-box {
            width: 100%-20px;
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="calculator-box">
        <div class="center-text">
            <h2>调和酰胺键密度(HABD)计算器</h2>
        </div>
        <form id="calculator-form">
            <label for="A">胺单体的分子量M<sub>A</Canvas></sub>，官能度A:</label>
            <br>
            <div class="parameter-option">
                <input type="radio" id="A_auto1" name="A_radio" value="108.14 2" checked>
                <label for="A_auto1">间苯二胺，MPD，m-phenylenediamine</label>
            </div>
            <br>
            <!-- <img src="../static/MPD.png" alt="Example Image"> -->
            <div class="parameter-option">
                <input type="radio" id="A_auto1" name="A_radio" value="108.14 2" checked>
                <label for="A_auto2">对苯二胺，PPD，p-phenylenediamine</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="A_auto1" name="A_radio" value="108.14 2" checked>
                <label for="A_auto3">邻苯二胺，OPD，o-phenylenediamine</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="A_auto1" name="A_radio" value="86.14 2" checked>
                <label for="A_auto4">哌嗪，PIP，piperazine</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="A_auto1" name="A_radio" value="60.10 2" checked>
                <label for="A_auto5">乙二胺，EDA，ethylenediamine</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="A_auto1" name="A_radio" value="392.50 4" checked>
                <label for="A_auto6">四-(4-氨基苯)乙烯，TAPE，tetrakis (4-aminophenyl) ethene</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="A_auto1" name="A_radio" value="380.48 4" checked>
                <label for="A_auto7">四(4-氨基苯基)甲烷，TAM，tetrakis (4-aminophenyl) methane</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="A_auto1" name="A_radio" value="351.44 3" checked>
                <label for="A_auto8">1,3,5-三(4-氨基苯基)苯，TAPB，1,3,5-tris(4-aminophenyl)-benzene</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="A_manual" name="A_radio" value="manual">
                <label for="A_manual">手动输入</label>
            </div>
            <br>
            <div>
                <input type="text" id="MA_input" name="MA">
                <input type="text" id="A_input" name="A">
            </div>
            <br>


            <label for="C">酰氯单体的分子量M<sub>C</Canvas></sub>，官能度C:</label>
            <br>
            <div class="parameter-option">
                <input type="radio" id="C_auto2" name="C_radio" value="265.48 3" checked>
                <label for="C_auto2">1,3,5-苯三甲酰氯，TMC，trimesoyl chloride</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="C_auto1" name="C_radio" value="271.53 3" checked>
                <label for="C_auto1">环己烷-1,3,5-三甲酰氯，HTC，cyclohexane-1,3,5-tricarbonyl chloride</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="C_auto3" name="C_radio" value="528.94 6" checked>
                <label for="C_auto3">2,2`,4,4`,6,6`-联苯六酰氯, BHAC, 2,2`,4,4`,6,6`-biphenyl hexaacyl chloride</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="C_auto4" name="C_radio" value="203.02 2" checked>
                <label for="C_auto4">间苯二甲酰氯，IPC，isophthaloyal chloride</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="C_auto5" name="C_radio" value="404.03 4" checked>
                <label for="C_auto5">2,2',5,5'-联苯四酰氯，op-BTEC，2,2`,5,5`-biphenyl tetraacyl chloride</label>
            </div>
            <br>
            <div class="parameter-option">
                <input type="radio" id="C_manual" name="C_radio" value="manual">
                <label for="C_manual">手动输入</label>
            </div>
            <br>
            <div>
                <input type="text" id="MC_input" name="MC">
                <input type="text" id="C_input" name="C">
            </div>
            <br>
            <br>

            <label for="O">羧基O/酰胺键O:</label>
            <input type="text2" id="O" name="O" required>
            <br>
            <label for="N">（氨基N+质子化氨基N）/酰胺键N:</label>
            <input type="text2" id="N" name="N" required>

            
            
            <button type="submit">计算</button>
        </form>
        <!-- 添加结果显示区域 -->
        <div class="result-box">
            <div class="center-text">
                <h3>计算结果</h3>
            </div>
            <table id="results-table">
                <thead>
                    <tr>
                        <th>键名</th>
                        <th>键值（mmol/g）</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 结果行将在计算后动态插入 -->
                </tbody>
            </table>
        </div>
    </div>
    <script>
        window.onload = function() {
            // 获取所有单选按钮
            var radioButtons = document.getElementsByName('A_radio');
    
            // 为每个单选按钮添加事件监听器
            radioButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    // 如果选择了已有参数，则取消输入框的required属性
                    if (button.value !== 'manual') {
                        document.getElementById('MA_input').removeAttribute('required');
                        document.getElementById('A_input').removeAttribute('required');
                    } else {
                        // 如果选择了手动输入，则添加required属性
                        document.getElementById('MA_input').setAttribute('required', true);
                        document.getElementById('A_input').setAttribute('required', true);
                    }
                });
            });

            // 获取所有单选按钮
            var radioButtons = document.getElementsByName('C_radio');
    
            // 为每个单选按钮添加事件监听器
            radioButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    // 如果选择了已有参数，则取消输入框的required属性
                    if (button.value !== 'manual') {
                        document.getElementById('MC_input').removeAttribute('required');
                        document.getElementById('C_input').removeAttribute('required');
                    } else {
                        // 如果选择了手动输入，则添加required属性
                        document.getElementById('MC_input').setAttribute('required', true);
                        document.getElementById('C_input').setAttribute('required', true);
                    }
                });
            });
        };
    </script>
    <script>
        document.getElementById('calculator-form').addEventListener('submit', function(event) {
            event.preventDefault();
            // 获取输入值并进行计算
            var radio_A = document.querySelector('input[name="A_radio"]:checked').value;
            if (radio_A === "manual") {
                M_A = parseFloat(document.getElementById('MA_input').value);
                A = parseFloat(document.getElementById('A_input').value);
            } else {
                var values = radio_A.split(' ');
                M_A = parseFloat(values[0]);
                A = parseFloat(values[1]);
            }

            var radio_C = document.querySelector('input[name="C_radio"]:checked').value;
            if (radio_C === "manual") {
                M_C = parseFloat(document.getElementById('MC_input').value);
                C = parseFloat(document.getElementById('C_input').value);
            } else {
                var values = radio_C.split(' ');
                M_C = parseFloat(values[0]);
                C = parseFloat(values[1]);
            }

            var N = parseFloat(document.getElementById('N').value);
            var O = parseFloat(document.getElementById('O').value);
            
            // 这里可以添加你的计算逻辑
            var M_gamma = M_A / A;
            var M_alpha = M_C / C - 35.5 + 17;
            var M_beta = M_alpha + M_gamma - 18;

            var HABD = 1000 / (O/2*M_alpha + M_beta + N * M_gamma);
            var HCD = 1000*(O/2) / ((O/2) * M_alpha + M_beta + N * M_gamma);
            var HAD = 1000*N / (O/2*M_alpha + M_beta + N * M_gamma); 

            // 更新结果表格
            var resultsTableBody = document.getElementById('results-table').getElementsByTagName('tbody')[0];
            resultsTableBody.innerHTML = ''; // 清空现有的结果行
            // 插入新的结果行
            var rows = [
                {key: '调和酰胺键密度(HABD)', value: HABD},
                {key: '调和羧基密度(HCD)', value: HCD},
                {key: '调和氨基密度(HAD)', value: HAD}
            ];
            rows.forEach(function(row) {
                var newRow = resultsTableBody.insertRow();
                var cellKey = newRow.insertCell(0);
                var cellValue = newRow.insertCell(1);
                cellKey.textContent = row.key;
                cellValue.textContent = row.value.toFixed(2); // 保留两位小数
            });
        });
    </script>
</body>
</html>
